<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body>
    <div class="header">
        <div class="header-nav">
            <span class="logo"></span>
            <ul>
                <li>
                    <a href="#">发现音乐</a>
                    <sub class="cor"></sub>
                </li>
                <li><a href="#">我的音乐</a></li>
                <li><a href="#">朋友</a></li>
                <li><a href="#">商城</a></li>
                <li><a href="#">音乐人</a></li>
                <li><a href="#">下载客户端</a></li>
            </ul>
            <span class="hot"></span>
            <div class="search">
                <button class="btn"></button>
                <input type="text" placeholder="音乐/视频/电台/用户">
            </div>
            <div class="creator">创作者中心</div>
            <button class="btn2">登录</button>
        </div>
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">推荐</a></li>
            <li><a href="#">排行榜</a></li>
            <li><a href="#">歌单</a></li>
            <li><a href="#">主播电台</a></li>
            <li><a href="#">歌手</a></li>
            <li><a href="#">新碟上架</a></li>
        </ul>
    </div>
    <div class="lunbo">
        <div id="prev"></div>
        <div class="content">
            <div id="list">
                <img src="images/banner1.jpg" alt="">
                <img src="images/banner2.jpg" alt="">
                <img src="images/banner3.jpg" alt="">
                <img src="images/banner4.jpg" alt="">
                <img src="images/banner5.jpg" alt="">
                <img src="images/banner6.jpg" alt="">
                <img src="images/banner7.jpg" alt="">
                <img src="images/banner8.jpg" alt="">
                <img src="images/banner9.jpg" alt="">
                <img src="images/banner10.jpg" alt="">
            </div>
            <div id="list-right">
            </div>
        </div>
        <div id="next"></div>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>

    <div class="center">
        <div class="return">
            <!-- <div class="jt"></div>
            <div class="text">Top</div> -->
        </div>
        <div class="container">
            <div class="left">
                <div class="hot-music">
                    <div class="left-nav">
                        <div class="qiu"></div>
                        <a href="#">热门推荐</a>
                        <div class="tab">
                            <a href="#">华语</a>
                            <span>|</span>
                            <a href="#">流行</a>
                            <span>|</span>
                            <a href="#">摇滚</a>
                            <span>|</span>
                            <a href="#">民谣</a>
                            <span>|</span>
                            <a href="#">电子</a>
                        </div>
                        <span class="more">更多</span>
                    </div>
                    <div class="music-list">
                        <div>
                            <div class="box">
                                <img src="images/img1.jpg">
                                <div class="bottom">
                                    <span class="listen"></span>
                                    <span class="num">76万</span>
                                    <span class="play"></span>
                                </div>
                            </div>
                            <a href="#">万物皆有裂痕，生活的答案不止是完美</a>
                        </div>
                        <div>
                            <div class="box">
                                <img src="images/img2.jpg">
                                <div class="bottom">
                                    <span class="listen"></span>
                                    <span class="num">22万</span>
                                    <span class="play"></span>
                                </div>
                            </div>
                            <a href="#">中文说唱|我想呼风唤雨用奇妙旋律</a>
                        </div>
                        <div>
                            <div class="box">
                                <img src="images/img3.jpg">
                                <div class="bottom">
                                    <span class="listen"></span>
                                    <span class="num">2926万</span>
                                    <span class="play"></span>
                                </div>
                            </div>
                            <a href="#">[韩系私人订制]最懂你的韩系推荐 每日更新35首</a>
                        </div>
                        <div>
                            <div class="box">
                                <img src="images/img4.jpg">
                                <div class="bottom">
                                    <span class="listen"></span>
                                    <span class="num">119</span>
                                    <span class="play"></span>
                                </div>
                            </div>
                            <a href="#"><span class="radio">电台节目</span>圣诞有你 梦幻惊喜</a>
                        </div>
                    </div>
                </div>
                <div class="new-music">
                    <div class="left-nav">
                        <div class="qiu"></div>
                        <a href="#">新碟上架</a>
                        <span class="more2 more">更多</span>
                    </div>
                    <div class="new-music-list">
                        <a href="#" class="prev"></a>
                        <div class="album">
                            <div class="one">
                                <div class="album-img">
                                    <img src="images/new1.jpg">
                                </div>
                                <p class="p1"><a href="#">AZORAland·我是...</a></p>
                                <p class="p2">尤长靖</p>
                            </div>
                            <div class="two">
                                <div class="album-img">
                                    <img src="images/new2.jpg">
                                </div>
                                <p class="p1"><a href="#">致明日的舞</a></p>
                                <p class="p2">陈奕迅</p>
                            </div>
                            <div class="three">
                                <div class="album-img">
                                    <img src="images/new3.jpg">
                                </div>
                                <p class="p1"><a href="#">REVISIT</a></p>
                                <p class="p2">张国荣</p>
                            </div>
                            <div class="four">
                                <div class="album-img">
                                    <img src="images/new4.jpg">
                                </div>
                                <p class="p1"><a href="#">Lonely</a></p>
                                <p class="p2">Justin Bieber  /  Be...</p>
                            </div>
                            <div>
                                <div class="album-img">
                                    <img src="images/new5.jpg">
                                </div>
                                <p class="p1"><a href="#">彩券</a></p>
                                <p class="p2">薛之谦</p>
                            </div>
                        </div>
                        <a href="#" class="next"></a>
                    </div>
                </div>
                <div class="rank">
                    <div class="left-nav">
                        <div class="qiu"></div>
                        <a href="#">榜单</a>
                        <span class="more3 more">更多</span>
                    </div>
                    <div class="music-rank music-rank1">
                        <div class="soaring">
                            <img src="images/rank1.jpg">
                            <div>
                                <p><a href="#">云音乐飙升榜</a></p>
                                <span class="span1"></span>
                                <span class="span2"></span>
                            </div>
                        </div>
                        <ul class="rank1">
                            <li><span>1</span>云与海</li>
                            <li><span>2</span>天外来物</li>
                            <li><span>3</span>在哪里都很好</li>
                            <li><span>4</span>启</li>
                            <li><span>5</span>送一朵愧疚的花</li>
                            <li><span>6</span>再说句晚安</li>
                            <li><span>7</span>什么跟什么有什么关系</li>
                            <li><span>8</span>资深庸才</li>
                            <li><span>9</span>Things I do for love</li>
                            <li><span>10</span>SO BAD</li>
                            <li>查看全部> </li>
                        </ul>
                    </div>
                    <div class="music-rank music-rank1">
                        <div class="soaring">
                            <img src="images/rank2.jpg">
                            <div>
                                <p><a href="#">云音乐新歌榜</a></p>
                                <span class="span1"></span>
                                <span class="span2"></span>
                            </div>
                        </div>
                        <ul class="rank1">
                            <li><span>1</span>如果当时2020</li>
                            <li><span>2</span>经济舱(live)</li>
                            <li><span>3</span>我很好(吉他版)</li>
                            <li><span>4</span>经济舱</li>
                            <li><span>5</span>会不会(正式版)</li>
                            <li><span>6</span>一花一剑</li>
                            <li><span>7</span>嘻哈帝国(Empire)</li>
                            <li><span>8</span>I Need a Girl,Pt.3</li>
                            <li><span>9</span>彩券</li>
                            <li><span>10</span>执迷不悟(DJ版)</li>
                            <li>查看全部> </li>
                        </ul>
                    </div>
                    <div class="music-rank">
                        <div class="soaring">
                            <img src="images/rank3.jpg">
                            <div>
                                <p><a href="#">网易原创歌曲榜</a></p>
                                <span class="span1"></span>
                                <span class="span2"></span>
                            </div>
                        </div>
                        <ul class="rank1">
                            <li><span>1</span>Overlove</li>
                            <li><span>2</span>古城千寻</li>
                            <li><span>3</span>西施江南</li>
                            <li><span>4</span>乌托邦</li>
                            <li><span>5</span>最难写是结尾</li>
                            <li><span>6</span>一分一寸</li>
                            <li><span>7</span>三个字</li>
                            <li><span>8</span>Movie</li>
                            <li><span>9</span>莫欺少年穷</li>
                            <li><span>10</span>给你十万安全感</li>
                            <li>查看全部> </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="login">
                    <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="#">用户登录</a>
                </div>
                <div class="right-content">
                    <div class="singer">
                        <div>入驻歌手</div>
                        <a href="#">查看全部 ></a>
                    </div>
                    <div class="zhm">
                        <img src="images/singer1.jpg">
                        <div>
                            <p>张惠妹aMEI</p>
                            <span>台湾歌手张惠妹</span>
                        </div>
                    </div>
                    <div class="zhm">
                        <img src="images/singer2.jpg">
                        <div>
                            <p>音乐人赵雷</p>
                            <span>民谣歌手</span>
                        </div>
                    </div>
                    <div class="apply">
                        <a href="#">申请成为网易音乐人</a>
                    </div>
                    <div class="singer">
                        <div>热门主播</div>
                    </div>
                    <div class="host">
                        <img src="images/host1.jpg">
                        <div>
                            <p>陈立</p>
                            <span>心理学家、美食家陈立教授</span>
                        </div>
                    </div>
                    <div class="host">
                        <img src="images/host2.jpg">
                        <div>
                            <p>DJ艳秋</p>
                            <span>著名音乐节目主持人</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="footer-content">
            <div class="footer-left">
                <ul>
                    <li><a href="#">服务条款</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">隐私政策</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">儿童隐私政策</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">版权投诉指引</a></li>
                    <li><span>|</span></li>
                    <li><a href="#">意见反馈</a></li>
                    <li><span>|</span></li>
                </ul>
                <p>网易公司版权所有&copy;1997-2020&nbsp;&nbsp;&nbsp;杭州乐读科技有限公司运营：浙网文[2018]3506-263号</p>
                <p>违法和不良信息举报电话：0571-89853516&nbsp;&nbsp;&nbsp;举报邮箱：ncm5990@163.com</p>
                <p>粤B2-20090191-18&nbsp;&nbsp;工业和信息化部备案管理系统网站&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span><img src="images/police.png"></span>  浙公网安备 33010902002564号</p>
            </div>
            <div class="footer-right">
                <div class="icon1">
                    <div class="amped"></div>
                    <span class="amped-bottom"></span>
                </div>
                <div class="icon1">
                    <div class="user"></div>
                    <span class="user-bottom"></span>
                </div>
                <div class="icon1">
                    <div class="musician"></div>
                    <span class="musician-bottom"></span>
                </div>
                <div class="icon1">
                    <div class="good"></div>
                    <span class="good-bottom"></span>
                </div>
                <div class="icon1">
                    <div class="video"></div>
                    <span class="video-bottom"></span>
                </div>
            </div>
        </div>
    </div>


    
    <script>
        var index=0;
        $("#prev").click(function(){
            index--;
            if(index<0){
                index=9;
            }
            animate(index);
        })
        $("#next").click(function(){
            index++;
            if(index>9){
                index=0;
            }
            animate(index)
        })
        $("#btns span").click(function(){
            index = $(this).index();
            animate(index)
        })
        var timer = setInterval(function(){
            $("#next").trigger("click")
        },2000)

        $("#list").mouseenter(function(){
            clearInterval(timer)
        })
        $("#list").mouseleave(function(){
            timer = setInterval(function(){
            $("#next").trigger("click")
            },2000);
        })

        function animate(index){
            $("#list img").eq(index).fadeIn(500).siblings().fadeOut(500);
            $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            $(".lunbo").css({
                "backgroundImage":"url(images/bg"+index+".jpg)"
            })
        }

        $(window).scroll(function(){
            let scrollTop = $(window).scrollTop()
            // console.log(scrollTop)
            if(scrollTop>0){
               var opacity = 1
            }else{
                opacity = 0
            }
            $(".return").css({
                opacity:opacity
            })

            $(".return").click(function(){
                $(window).scrollTop(0)
            })
        })
    </script>
</body>
</html>